<template>
    <div class="order-info">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部" name="all"></el-tab-pane>
            <el-tab-pane label="待支付" name="unPaid"></el-tab-pane>
            <el-tab-pane label="已取消" name="cancel"></el-tab-pane>
            <el-tab-pane label="已支付" name="paid"></el-tab-pane>
        </el-tabs>
        <!-- 信息列表 -->
        <el-table :data="orders" style="width: 100%" stripe class="table">
            <el-table-column type="selection" width="25" />
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" class="demo-table-expand">
                        <el-form-item label="景区名称">
                            <span>{{ props.row.attrName }}</span>
                        </el-form-item>
                        <el-form-item label="下单时间">
                            <span>{{ props.row.createTime }}</span>
                        </el-form-item>
                        <el-form-item label="支付时间" v-show="props.row.payTime">
                            <span>{{ props.row.payTime }}</span>
                        </el-form-item>
                        <el-form-item label="出行时间" v-show="props.row.travelTime">
                            <span>{{ props.row.travelTime }}</span>
                        </el-form-item>
                        <el-form-item label="出行备注">
                            <span>{{ props.row.orderDesc || '暂无备注' }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column prop="id" label="编号" width="200" />
            <el-table-column prop="username" label="用户名" width="100" />
            <el-table-column prop="phone" label="手机号" width="120" />
            <el-table-column prop="count" label="人数" width="100" />
            <el-table-column prop="price" label="价格" width="100" />
            <el-table-column prop="totalPrice" label="总金额" width="100" />

            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    <el-tag type="warning" v-show="scope.row.status === 0" @click="goPayOrder(scope.row.id)" disable-transitions="true">待支付</el-tag>
                    <!-- <span v-show="scope.row.status === 1" class="span-paid">已完成</span> -->
                    <el-tag type="success" v-show="scope.row.status === 1" disable-transitions="true">已完成</el-tag>
                    <el-tag type="danger" v-show="scope.row.status === 2" disable-transitions="true">已取消</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background small :page-size="form.pageSize" :pager-count="11" layout="prev, pager, next"
            :total="total" class="bottom" @current-change="handleCurrentChange" />
    </div>
</template>
 
<script>
import { getOrders, payOrder } from '@/api/order';

export default {
    name: 'OrderInfo',
    data() {
        return {
            orders: [],
            form: {
                pageNum: 1,
                pageSize: 5,
                status: 3
            },
            activeName: 'all'
        }
    },
    created() {
        this.getOrderList()
    },
    methods: {
        async getOrderList() {
            const res = await getOrders(this.form)
            if (res.code === 200) {
                const { orders, total } = res.data
                this.orders = orders
                console.log(this.orders)
                this.total = total
            } else {
                console.log('查询失败')
            }
        },
        handleClick(tab, event) {
            console.log(tab, event)
            if (tab.name === 'all') {
                this.form.status = 3
            } else if (tab.name === 'unPaid') {
                this.form.status = 0
            } else if (tab.name === 'paid') {
                this.form.status = 1
            } else {
                this.form.status = 2
            }


            this.getOrderList()
        },
        goPayOrder(id) {
            this.$confirm('是否确定支付？', '支付', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonClass: '取消'
            }).then(() => {
                payOrder(id).then(res => {
                    if (res.code === 200) {
                        this.$message.success('支付成功')
                        // 重新获取数据
                        this.getOrderList()
                    } else {
                        this.$message.error('支付失败')
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'warning',
                    message: '已取消支付'
                })
            })

        },
        handleCurrentChange(val) {
            this.form.pageNum = val
            this.getOrderList()
        }
    }
}
</script>
 
<style lang="less" scoped>
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #ff9d00;
    color: #FFF !important;
}

/deep/ .el-pager li:hover {
    color: #ff9d00 !important;
}

/deep/ .el-tabs__active-bar {
    background-color: #c59620;
}

/deep/ .el-tabs__item:hover {
    color: goldenrod;
}

.order-info {

    /deep/ .el-tabs__item.is-active {
        color: goldenrod;
    }

    .table {
        margin-top: 10px;
        min-height: 400px;

        .attr-name {
            white-space: nowrap;
            overflow: hidden;
        }

        .demo-table-expand {
            margin-left: 80px;

            /deep/ .el-form-item__label {
                width: 90px;
                color: #99a9bf;
            }

            .el-form-item {
                width: 50%;
                margin-right: 0;
                margin-bottom: 0;
            }
        }

        .span-unpaid {
            color: rgb(45, 106, 181);
            text-decoration: underline;
        }

    }

    .el-pagination {
        margin-top: 10px;
        margin-bottom: 10px;
    }

}</style>